<script setup>
import { toRefs } from 'vue';
import useStore from './store';

/* 
vue2的写法  this.$store.user.state
pinia 实现模块化
1. 建立总主管，把所有的状态都引进，放到总主管的 state 中
2. 页面要使用，就引进总主管 import useStore from './store'
3. 调用总主管，拿到所有状态
4. 解构出你想要的数据即可
*/
const { user, counter } = useStore()
const { count, double, add, addNum, addAsync } = toRefs(counter)
</script>

<template>
  <h1>Hello vue3</h1>
  <div>{{ user }}</div>
  <div>{{ user.name }}</div>


  <hr>
  <div>{{ counter }}</div>
  <!-- 获取 state -->
  <div>{{ count }}</div>
  <!-- 获取 getters -->
  <div>{{ double }}</div>

  <!-- 方法直接调用即可，同步异步都一样 -->
  <button @click="add">点我+10</button>
  <button @click="addNum(20)">点我+20</button>
  <button @click="addAsync(30)">点我异步+30</button>
</template>
